<template>
    <div>
      <router-link to="/" tag="div" class="header-abs" v-show="showAbs">
        <div class="iconfont header-abs-icon">&#xe624;</div>
      </router-link>



        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
          <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe624;</div>
          </router-link>
          景点详情
        </div>
    </div>
</template>

<script>
    export default {
        name: "Head",
        data(){
          return{
            showAbs:true,
            opacityStyle:{
              opacity:0
            }
          }
        },
      methods:{
        handleScroll(){
          //PC端使用document.documentElement.scrollTop 移动端使用document.body.scrollTop
          // console.log(document.documentElement.scrollTop)
          const top=document.documentElement.scrollTop
          console.log(top)
          if(top>60){
              let opacity =top/140
            opacity=opacity>1?1:opacity
              this.opacityStyle={opacity}
              this.showAbs=false
          }else {
            this.showAbs=true
          }
        }
      },
      activated() {
          // console.log("activated")
        //原生事件绑定方法
        window.addEventListener("scroll",this.handleScroll)
      },
      //对全局事件解绑 页面即将替换为新的页面的时候
      deactivated() {
          window.removeEventListener("scroll",this.handleScroll)
      },

    }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
    .header-abs
      position absolute
      left .2rem
      top .2rem
      width .8rem
      height .8rem
      line-height .8rem
      border-radius .4rem
      text-align center
      background rgba(0,0,0,.8)
      z-index 2
      .header-abs-icon
          color #fff
          font-size .4rem
    .header-fixed
      position: fixed
      left 0
      top 0
      right 0
      height: $headerHeight
      line-height: $headerHeight
      text-align: center
      color: #fff
      background: $bgColor
      font-size: .32rem
      z-index 1
      .header-fixed-back
        position: absolute
        top: 0
        left: 0
        width: .64rem
        text-align: center
        font-size: .4rem
        color: #fff
</style>
